<script lang="ts" setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const value = ref<number>(3.5)

const props = defineProps({ lecturers: { type: Object, required: true } })

// 跳转讲师详情页
const jumpToLecturerDetail = () => {
  router.push('/lecturerdetails')
}
const lecturers = props.lecturers
</script>

<template>
  <div class="educ-gard">
    <div class="educ-gard-scroll">
      <a-row :gutter="16" class="educ-gard-row">
        <a-col class="educ-gard-row-padding" @click="jumpToLecturerDetail" v-for="(item, index) in lecturers"
          :key="index">
          <a-card :bordered="false">
            <div class="educ-gard-introduce">
              <div class="educ-gard-introduce-avatar">
                <img :src="item.avatar" alt="" />
              </div>
              <div class="educ-gard-introduce-briefintroduction">
                <h3>{{ item.name }}</h3>
                <p class="educ-gard-introduce-briefintroduction-p">
                  {{ item.introduction }}
                </p>
                <!-- 评分 -->
                <div class="educ-gard-introduce-briefintroduction-rate">
                  <span class="educ-gard-introduce-briefintroduction-rate-divide">{{ item.rating }}</span>
                  <a-rate class="educ-gard-introduce-briefintroduction-rate-star" v-model:value="item.rating" disabled
                    allow-half />
                  <span class="educ-gard-introduce-briefintroduction-rate-text">讲师评分</span>
                </div>
                <!-- 人数 -->
                <div class="educ-gard-introduce-briefintroduction-quantity">
                  <span class="educ-gard-introduce-briefintroduction-quantity-student">{{ item.studentsCount }}名学生</span>
                  <span class="educ-gard-introduce-briefintroduction-quantity-course">{{ item.coursesCount }}门课程</span>
                </div>
              </div>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.educ-gard {
  display: flex;
  padding: 1.25rem 0;
  overflow: hidden;

  &-scroll {
    display: flex;
    white-space: nowrap; // 防止换行
  }

  &-row {
    display: flex;
    flex-wrap: nowrap; // 禁止换行

    &-padding {
      margin-left: 1.25rem;
      cursor: pointer;
    }
  }

  &-introduce {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;

    &-avatar {
      width: 3.4375rem;
      height: 3.4375rem;

      img {
        width: 100%;
        height: 100%;
        border-radius: 6.25rem;
      }
    }

    &-briefintroduction {
      margin-left: 0.625rem;

      &-p {
        margin-bottom: 0.3125rem;
      }

      &-rate {
        display: flex;
        align-items: center;
        justify-content: center;

        &-text {
          font-size: $educ-font-size-sm;
        }

        &-star {
          padding: 0 0.625rem;
          font-size: 0.875rem;
        }
      }

      &-quantity {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.625rem;

        &-student {
          font-size: $educ-font-size-sm;
        }

        &-course {
          font-size: $educ-font-size-sm;
        }
      }
    }
  }
}
</style>
